<template>
  <div class="newplaying">
    <!-- 加载层 -->
    <loading v-if="loading"></loading>
    <!-- better-scroll滑动加载 -->
    <div class="newwrapper" ref="newwrapper" :style="{height:height+'px'}">
      <ul ref="newcontent" class="newcontent">
      <li
        class="one-item"
        v-for="(item, index) in filmList"
        :key="'item' + index"
        @click="gotoDetial(item.filmId)"
      >
        <!-- 封面 -->
        <div class="pic">
          <img :src="item.poster" />
        </div>
        <!-- 电影相关信息 -->
        <ul>
          <li>{{ item.name }}</li>
          <li>{{ item.category }}</li>
          <li>主演：{{ item.actors | formatActors }}</li>
          <li>{{ item.premiereAt | formatPremiereAt }} 中国大陆上映</li>
          <li>时长：{{ item.runtime }}分钟</li>
        </ul>
        <!-- 评分和购票 -->
        <div class="buy">
          <span v-show="item.grade">
            <span>{{ item.grade }}</span>分 
          </span>
          <button>购票</button>
        </div>
      </li>
      <div class="bottomHeight"></div>
    </ul>
    </div>
  </div>
</template>

<script>
import Loading from "../../components/Loading.vue";
import {nowPlayingListData} from "../../api/api.js"
import moment from 'moment';
import BScroll from "better-scroll"
export default {
  data() {
    return {
      //页数
      page: 1,
      //电影列表
      filmList: [],
      //默认显示加载层
      loading: true,
      //加载滑动
      newscrool: null,
      //重新赋值屏幕可视高度
      height: 0,
      //新加载的数组列表
      newList: [],
      //key值
      index: 0
    };
  },
  mounted() {
    // 不刷新的情况下可滑动的高度
    this.height = parseFloat(window.document.documentElement.offsetHeight);
    this.$nextTick(() => {
      this.newscrool = new BScroll(this.$refs.newwrapper, {
          // 激活上滑动的事件监听
          pullUpLoad: true,
          // 激活下滑的事件监听
          pullDownRefresh: true,
          // 默认情况下使用newscrool后，它会禁止浏览器的点击事件
          click: true
      })
      // 上拉刷新
      this.newscrool.on('pullingUp', () => {
          console.log('上拉刷新')
          // 获取数据
          this.getUpNewList()
          //本次pullup动作已经完成，继续准备下一次pullup
          this.newscrool.finishPullUp()
      })
      this.newscrool.on('pullingDown', () => {
          console.log('下拉刷新')
          // 获取数据
          this.getDownNewList()
          //本次pulldown动作已经完成，继续准备下一次pulldown
          this.newscrool.finishPullDown()
      })
    })
  },
  beforeDestroy() {
    // 节约资源
    this.newscrool = null
  },
  components: {
    Loading,
  },
  async created() {
    let res = await nowPlayingListData(this.page)
    console.log(res.data.data.films);
    //获取电影列表
    this.filmList = res.data.data.films;
    //判断是否有数据，如果有就移出加载层
    if (this.filmList.length > 0) {
      this.loading = false;
    }
  },
  filters: {
    //格式化主演名字
    formatActors: function (value) {
      let actors = "";
      value.forEach((element) => {
        actors += element.name + "、";
      });
      return actors;
    },
    //格式化上映日期
    formatPremiereAt: function(value) {
      return moment(value * 1000).format("YYYY年MM月DD日")
    },
  },
  methods: {
    //去该电影的详情页
    gotoDetial(filmid) {
      this.$router.push("/film/detial/" + filmid);
    },
    //刷新请求下拉新数据
    async getDownNewList() {
      //页数增加后的新数据
      this.page++
      let res = await nowPlayingListData(this.page)
      // console.log(res.data.data.films);
      this.newList = res.data.data.films
      console.log(this.newList);
      //创建空数组来合并新旧页数的数据
      var newArr=[];
      for(var j=0;j<this.newList.length;j++){
          newArr.push(this.newList[j]);
      }
      for(var i=0;i<this.filmList.length;i++){
          newArr.push(this.filmList[i]);
      }
      //合并后的数据重新赋值
      this.filmList = newArr
      //屏幕可视高度追加新数据的长度
      this.height += parseFloat(this.newList.length * 130.5)
      console.log(this.filmList);
      return this.filmList;
    },
    //刷新请求上划新数据
    async getUpNewList() {
      this.page++
      let res = await nowPlayingListData(this.page)
      // console.log(res.data.data.films);
      this.newList = res.data.data.films
      console.log(this.newList);
      var newArr=[];
      for(var i=0;i<this.filmList.length;i++){
          newArr.push(this.filmList[i]);
      }
      for(var j=0;j<this.newList.length;j++){
          newArr.push(this.newList[j]);
      }
      this.filmList = newArr
      this.height += parseFloat(this.newList.length * 2.6)
      console.log(this.filmList);
      return this.filmList;
    },
    //重新渲染
    forceRerender() {
      this.index++
    }
  }
}

</script>

<style lang="scss" scoped>
.newplaying {
  .newwrapper {
    .newcontent {
      width: 100%;
      overflow-y: auto;
      // 单个电影
      .one-item {
        width: 100%;
        height: 2.6rem;
        // background-color: bisque;
        display: flex;
        justify-content: space-between;
        padding: 0.25rem;
        border-bottom: 1px solid #ccc;
        // 电影封面
        .pic {
          margin-right: 0.1rem;
          img {
            width: 1.3rem;
            height: 1.7rem;
          }
        }
        // 电影相关信息
        ul {
          width: 4.2rem;
          // background-color: purple;
          li {
            font-size: 0.28rem;
            color: rgb(80, 78, 78);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 0.06rem;
          }
          li:nth-child(1) {
            font-size: 0.34rem;
            // font-weight: 600;
          }
          li:nth-child(5) {
            font-size: 0.23rem;
            color: gray;
          }
        }
        // 评分和购票
        .buy {
          display: flex;
          flex-direction: column;
          width: 1rem;
          position: relative;
          z-index: -9;
          span {
            color: orange;
            font-size: 0.23rem;
            span {
              font-size: 0.4rem;
            }
          }
          button {
            background-color: red;
            color: #fff;
            line-height: 0.6rem;
            border: 0;
            border-radius: 3px;
            font-size: 0.3rem;
            position: absolute;
            bottom: .5rem;
            width: 1rem;
          }
        }
      }
      .bottomHeight {
        height: 1.1rem;
        width: 100%;
      }
    }
  }
}
</style>